<template>
  <div class="wraps">
    <!-- 左 送检预警 -->
    <div class="Left">
      <el-card class="box-card" shadow="hover" style="height: 83.5vh; position: relative;">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px; color: #1890ff; font-weight: 550">送检预警</span>
        </div>
          <SjYjLb/>
      </el-card>
    </div>

    <!-- 右 设备状态统计 -->
    <div class="right">
      <el-card class="box-card" shadow="hover" style="height: 83.5vh; position: relative;">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px; color: #1890ff; font-weight: 550">设备状态统计</span>
        </div>
        <SbZtTj/>
      </el-card>
    </div>
  </div>
</template>

<script>

import SjYjLb from "@/views/sbgl/sbglkb/components/SjYjLb.vue";
import SbZtTj from "@/views/sbgl/sbglkb/components/SbZtTj.vue";

export default {
  name: "sbglkb",
  components: {SbZtTj, SjYjLb},
 //设备管理看板

  created() {

  },
  methods: {}
}
</script>

<style scoped>
.wraps {
  position: relative;
  background-size: cover;
  width: 100%;
  height: calc(100vh - 134px);
  overflow: hidden; /* 防止 leftpart 超出 wrap */
}

/* 左上 */
.Left {
  position: absolute;
  top: 1%; /* 距离上面 6% */
  bottom: 1%; /* 距离下面 60% */
  left: 0.5%; /* 距离左侧1% */
  width: 80%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5); !* 模块背景颜色 并透明显示 *!*/
}

/* 右 */
.right {
  position: absolute;
  top: 1%; /* 距离上面 6% */
  bottom: 1%; /* 距离下面 60% */
  left: 81.5%; /* 距离左侧1% */
  width: 18%;
  border: 1px solid #D9EDF7;
  /*background-color: rgba(9, 37, 59, 0.5);*/
}
</style>
